<template>
  <div class="chart-wrapper" ref="radarChart"></div>
</template>

<script>
import * as echarts from "echarts";
import { onBeforeUnmount, onMounted, onUnmounted, reactive, ref } from "vue";
import { debounce } from "@/utils/debounce";

export default {
  name: "radarChart",
  setup() {
    const radarChart = ref(null);
    let myChart = null;

    const resizeHandler = debounce(() => {
      if (myChart) {
        myChart.resize();
      }
    }, 200);
    onMounted(() => {
      initEcharts();
      window.addEventListener("resize", resizeHandler);
    });
    onBeforeUnmount(() => {
      window.addEventListener("resize", resizeHandler);
    });

    //渲染echarts图
    const initEcharts = () => {
      const colorList = ["#FF9E8C", "#00D2C9"];
      myChart = echarts.init(radarChart.value);

      myChart.setOption({
        color: colorList,
        title: {
          show: false,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          icon: "circle",
          show: true,
          right: "5",
          top: "10",
          itemWidth: 10,
          itemHeight: 11,
          textStyle: {
            color: "#d5dfe8",
          },
          data: ["2019", "2020"],
        },
        radar: {
          center: ["42%", "50%"],
          radius: "65%",
          nameGap: 5,
          startAngle: 90,
          splitNumber: 4,
          name: {
            textStyle: {
              color: "#d5dfe8",
              fontSize: 14,
            },
          },
          shape: "circle",
          splitArea: {
            areaStyle: {
              color: ["transparent"],
            },
          },
          axisLabel: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(63,133,247,0.3)",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(63,133,247,0.3)",
            },
          },
          indicator: [
            {
              name: "JavaScrpt",
              max: 100,
            },
            {
              name: "Vue",
              max: 100,
            },
            {
              name: "jQuery",
              max: 100,
            },
            {
              name: "TypeScript",
              max: 100,
            },
            {
              name: "Echarts",
              max: 100,
            },
            {
              name: "webpack",
              max: 100,
            },
          ],
        },
        series: [
          {
            name: "2020",
            type: "radar",
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: "rgba(0,0,0,.2)",
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1,
              },
            },
            itemStyle: {
              normal: {
                shadowColor: "rgb(58,115,192)",
                shadowBlur: 15,
              },
            },
            data: [
              {
                value: [75, 85, 80, 80, 90, 90],
                name: "2020",
              },
            ],
          },
          {
            name: "2019",
            type: "radar",
            symbolSize: 0,
            areaStyle: {
              normal: {
                shadowBlur: 13,
                shadowColor: "rgba(0,0,0,.2)",
                shadowOffsetX: 0,
                shadowOffsetY: 10,
                opacity: 1,
              },
            },
            itemStyle: {
              normal: {
                shadowColor: "rgb(58,115,192)",
                shadowBlur: 15,
              },
            },
            data: [
              {
                value: [95, 60, 75, 20, 30, 20],
                name: "2019",
              },
            ],
          },
        ],
      });
    };

    return {
      radarChart,
    };
  },
  // data() {
  //   return {
  //     chart: null
  //   }
  // },
  // mounted() {
  //   this.initChart()
  // },
  // beforeDestroy() {
  //   if (!this.chart) {
  //     return
  //   }
  //   this.chart.dispose()
  //   this.chart = null
  // },
  // methods: {
  //   initChart() {
  //     this.chart = echarts.init(document.getElementById(this.id))

  //     this.chart.setOption({
  //       backgroundColor: '#394056',
  //       title: {
  //         top: 20,
  //         text: 'Requests',
  //         textStyle: {
  //           fontWeight: 'normal',
  //           fontSize: 16,
  //           color: '#F1F1F3'
  //         },
  //         left: '1%'
  //       },
  //       tooltip: {
  //         trigger: 'axis',
  //         axisPointer: {
  //           lineStyle: {
  //             color: '#57617B'
  //           }
  //         }
  //       },
  //       legend: {
  //         top: 20,
  //         icon: 'rect',
  //         itemWidth: 14,
  //         itemHeight: 5,
  //         itemGap: 13,
  //         data: ['CMCC', 'CTCC', 'CUCC'],
  //         right: '4%',
  //         textStyle: {
  //           fontSize: 12,
  //           color: '#F1F1F3'
  //         }
  //       },
  //       grid: {
  //         top: 100,
  //         left: '2%',
  //         right: '2%',
  //         bottom: '2%',
  //         containLabel: true
  //       },
  //       xAxis: [{
  //         type: 'category',
  //         boundaryGap: false,
  //         axisLine: {
  //           lineStyle: {
  //             color: '#57617B'
  //           }
  //         },
  //         data: ['13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55']
  //       }],
  //       yAxis: [{
  //         type: 'value',
  //         name: '(%)',
  //         axisTick: {
  //           show: false
  //         },
  //         axisLine: {
  //           lineStyle: {
  //             color: '#57617B'
  //           }
  //         },
  //         axisLabel: {
  //           margin: 10,
  //           textStyle: {
  //             fontSize: 14
  //           }
  //         },
  //         splitLine: {
  //           lineStyle: {
  //             color: '#57617B'
  //           }
  //         }
  //       }],
  //       series: [{
  //         name: 'CMCC',
  //         type: 'line',
  //         smooth: true,
  //         symbol: 'circle',
  //         symbolSize: 5,
  //         showSymbol: false,
  //         lineStyle: {
  //           normal: {
  //             width: 1
  //           }
  //         },
  //         areaStyle: {
  //           normal: {
  //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  //               offset: 0,
  //               color: 'rgba(137, 189, 27, 0.3)'
  //             }, {
  //               offset: 0.8,
  //               color: 'rgba(137, 189, 27, 0)'
  //             }], false),
  //             shadowColor: 'rgba(0, 0, 0, 0.1)',
  //             shadowBlur: 10
  //           }
  //         },
  //         itemStyle: {
  //           normal: {
  //             color: 'rgb(137,189,27)',
  //             borderColor: 'rgba(137,189,2,0.27)',
  //             borderWidth: 12

  //           }
  //         },
  //         data: [220, 182, 191, 134, 150, 120, 110, 125, 145, 122, 165, 122]
  //       }, {
  //         name: 'CTCC',
  //         type: 'line',
  //         smooth: true,
  //         symbol: 'circle',
  //         symbolSize: 5,
  //         showSymbol: false,
  //         lineStyle: {
  //           normal: {
  //             width: 1
  //           }
  //         },
  //         areaStyle: {
  //           normal: {
  //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  //               offset: 0,
  //               color: 'rgba(0, 136, 212, 0.3)'
  //             }, {
  //               offset: 0.8,
  //               color: 'rgba(0, 136, 212, 0)'
  //             }], false),
  //             shadowColor: 'rgba(0, 0, 0, 0.1)',
  //             shadowBlur: 10
  //           }
  //         },
  //         itemStyle: {
  //           normal: {
  //             color: 'rgb(0,136,212)',
  //             borderColor: 'rgba(0,136,212,0.2)',
  //             borderWidth: 12

  //           }
  //         },
  //         data: [120, 110, 125, 145, 122, 165, 122, 220, 182, 191, 134, 150]
  //       }, {
  //         name: 'CUCC',
  //         type: 'line',
  //         smooth: true,
  //         symbol: 'circle',
  //         symbolSize: 5,
  //         showSymbol: false,
  //         lineStyle: {
  //           normal: {
  //             width: 1
  //           }
  //         },
  //         areaStyle: {
  //           normal: {
  //             color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
  //               offset: 0,
  //               color: 'rgba(219, 50, 51, 0.3)'
  //             }, {
  //               offset: 0.8,
  //               color: 'rgba(219, 50, 51, 0)'
  //             }], false),
  //             shadowColor: 'rgba(0, 0, 0, 0.1)',
  //             shadowBlur: 10
  //           }
  //         },
  //         itemStyle: {
  //           normal: {
  //             color: 'rgb(219,50,51)',
  //             borderColor: 'rgba(219,50,51,0.2)',
  //             borderWidth: 12
  //           }
  //         },
  //         data: [220, 182, 125, 145, 122, 191, 134, 150, 120, 110, 165, 122]
  //       }]
  //     })
  //   }
  // }
};
</script>
